<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib uri="mytags" prefix="math" %>

<html>
<head><s:head />
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.min.js"></script> 
	<script type="text/javascript">
		$(function(){
			$('form').submit(function() {
			var message = $('input[name=message]', this).val();
			
			$.post("/struts/Chat/NewMessage", $.param({message: message}),
				 function(data) {
				 	var content = '';
				 	$.each(data.messages, function(i, msg){
            			content += '<p><b>' + msg.author + ': </b>' + msg.content + '</p>';
            		});
            		$(content).prependTo("#messages");
          	});
				 	
			$('input[name=message]', this).val('');
				return false;
			});
			
			$('form').data('interval', window.setInterval(function() {
				checkMessages();
			}, 5000));
		
		});
		
		function checkMessages() {
			$.get("/struts/Chat/CheckMessages",
				 function(data) {
				 	var content = '';
				 	$.each(data.messages, function(i, msg){
            			content += '<p><b>' + msg.author + ': </b>' + msg.content + '</p>';
            		});
            		$(content).prependTo("#messages");
          	});
		}
	</script>
	</head>
<body>
	<h1>Chat</h1>
	
	<div id="messages"/>
	
	<form>
		<s:property value="login" />:<s:textfield name="message"/>
		
		<s:submit />
	</form>
	
</body>
</html>